{% extends 'OmniDB_app/base.html' %}

{% block header_menu %}
<li><a id="menu_connections" href="../connections">Connections</a></li>
{% endblock %}

{% block header_actions %}
<li style="padding-right: 10px;"><img title="SQL History" style="vertical-align: middle; cursor: pointer;" onclick="showCommandList();" src="/static/OmniDB_app/images/command_list.png"/></li>
{% endblock %}

{% block content %}
	<div class="conn_tabs">
		<div id="conn_tabs" style='margin-left: 5px; margin-right: 5px;'>
			<ul>
			</ul>
		</div>
	</div>

    <div id="div_column_selection" style="display: none;">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 40%; height: 40%; left: 30%; top: 30%;">
                <a class="modal-closer" onclick="hideColumnSelection()">x</a>

                <div style="margin: 30px; position: absolute; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px;">

                <select id="sel_columns_left" ondblclick="addColumnToList()" style="width: 200px; height: 100%" size="10">
                	<option value="1">Column 1</option>
                	<option value="1">Column 2</option>
                	<option value="1">Column 3</option>
                	<option value="1">Column 4</option>
                </select>

                <div style="display: inline-block; vertical-align: top; width: 80px; position: absolute; left: 50%; margin-left: -40px;">

                	<div><button onclick="addColumnToList()"   style="width: 100%; margin-bottom: 10px;">Add</button></div>
                	<div><button onclick="remColumnFromList()" style="width: 100%;">Remove</button></div>

                </div>

                <select id="sel_columns_right" ondblclick="remColumnFromList()" style="width: 200px; height: 100%; position: absolute; right: 0px;" size="10">
                	<option value="1">Column 5</option>
                	<option value="1">Column 6</option>
                	<option value="1">Column 7</option>
                	<option value="1">Column 8</option>
                </select>
							</div>
            </div>
        </div>
    </div>

    <div id="div_find_replace" style="display: none;">
        <div class="modal_background_dark" style="z-index: 2000">
            <div class ="white_box" style="width: 40%; left: 30%; top: 30%;">
                <a class="modal-closer" onclick="hideFindReplace()">x</a>

                <div id="find_replace" style='margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px;'>
	                <ul>
	                <li id="find_replace_tab1">Find & Replace</li>
	  				</ul>
	  				<div id="div_find_replace_tab1">

	  					<div style="margin: 30px; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px;">
		                <div style="text-align: center;">
		                <div style="margin-bottom: 10px;">Text</div>
		                <input id="txt_replacement_text" type="text" style="width: 200px; margin-bottom: 20px;">
		                </div>
		                <div style="text-align: center;">
		                <div style="margin-bottom: 10px;">Replacement</div>
		                <input id="txt_replacement_text_new" type="text" style="width: 200px; margin-bottom: 20px;">
		                </div>
		                <div style="text-align: center;">
		                	<button onclick="replaceText();">Replace</button>
		                </div>
		                </div>


	  				</div>
  				</div>


            </div>
        </div>
    </div>

		<div id="div_commands_log" style="display: none;">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 90%; height: 90%; left: 5%; top: 5%;">
                <a class="modal-closer" onclick="hideCommandsLog()">x</a>

                <div style="height: 100%;">
	                <div id="div_commands_log_list" style="margin: 20px; height: 90%; overflow: scroll;">
	                </div>
                </div>
            </div>
        </div>
    </div>
<!--
		<div id="div_chat">
  	<div id="div_chat_header" class="div_chat_header_default">
  		OmniChat
  	</div>
  	<div id="div_chat_details">
  		<div id="div_chat_left_panel">
  		</div>
  		<div id="div_chat_right_panel">
		  	<div id="div_chat_content">
		  	</div>
		  	<div id="div_chat_footer">
		  		<textarea id="textarea_chat_message">
		  		</textarea>
		  		<button id="button_chat_send_message">
		  			Send
		  		</button>
		  	</div>
		</div>
	</div>
  </div>
-->
{% endblock %}
{% block include_css %}
	<link rel="stylesheet" type="text/css" href="/static/OmniDB_app/lib/aimaraJS/css/Aimara.css?v2.3.0"    />
	<link rel="stylesheet" type="text/css" href="/static/OmniDB_app/css/chartist.min.css?v2.3.0"           />
{% endblock %}
{% block include %}
<script type="text/javascript" src="/static/OmniDB_app/lib/cytoscape/cytoscape.min.js?v2.3.0"                         ></script>
<script type="text/javascript" src="/static/OmniDB_app/lib/cytoscape/cytoscape-spread.js?v2.3.0"                      ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/chartist.min.js?v2.3.0"                                     ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/chartist-plugin-axistitle.min.js?v2.3.0"                    ></script>
<script type="text/javascript" src="/static/OmniDB_app/lib/aimaraJS/lib/Aimara.js?v2.3.0"                             ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/ChatClient.js?v2.3.0"                                       ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/QueryClient.js?v2.3.0"                                      ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/Query.js?v2.3.0"                                            ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/Debug.js?v2.3.0"                                            ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/Workspace.js?v2.3.0"													              ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/EditData.js?v2.3.0"													                ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/AlterTable.js?v2.3.0"												                ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/CreateTabFunctions.js?v2.3.0"                               ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/Tree.js?v2.3.0"                                             ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/TreeSnippets.js?v2.3.0"                                     ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/TreePostgresql.js?v2.3.0"                                   ></script>
<script type="text/javascript" src="/static/OmniDB_app/js/CommandHistory.js?v2.3.0"                                   ></script>

<script>
	var v_query_port = {{ query_port }};
	var v_is_secure = {{ is_secure }};
	var v_selected_connection = {{ selected_connection }}
	var v_keybind_object = { v_execute: '{{ execute }}',
               v_execute_mac: '{{ execute_mac }}',
               v_replace: '{{ replace }}',
               v_replace_mac: '{{ replace_mac }}' };
</script>
{% endblock %}
